<template>
  <div class="setting">
    <!-- <el-button @click="changeColor">切换主题</el-button> -->
    <el-badge class="item">
      <el-icon @click="changeColor" class="change-theme-icon" size="22">
        <Sunny v-if="theme === 'light'" />
        <Moon v-else />
      </el-icon>
    </el-badge>
    <el-badge @click="handleFullScreen" class="item">
      <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏化'">
        <el-icon
          :class="{
            'full-screen-icon': !isFullscreen,
            'exit-full-screen-icon': isFullscreen,
          }"
          size="20"
        >
          <FullScreen v-if="!isFullscreen" />
          <exitFullSrceen v-else />
        </el-icon>
      </el-tooltip>
    </el-badge>
    <!-- <el-badge :value="12" class="item">
      <el-tooltip content="消息通知">
        <el-icon class="message-icon" size="20">
          <Message />
        </el-icon>
      </el-tooltip>
    </el-badge> -->
    <el-badge @click="isShowMessage = true" :value="12" class="item">
      <el-tooltip content="消息通知">
        <el-icon class="bell-icon" size="20">
          <Bell />
        </el-icon>
      </el-tooltip>
    </el-badge>
    <el-badge @click="isShowSetting = true" class="item">
      <el-tooltip content="设置">
        <el-icon class="setting-icon" size="20">
          <Setting />
        </el-icon>
      </el-tooltip>
    </el-badge>
    <el-dropdown>
      <el-avatar :src="userAvatar" class="avatar" @error="() => true">
        <el-icon>
          <User />
        </el-icon>
      </el-avatar>
      <template #dropdown>
        <el-dropdown-item @click="userCenter">
          <template #default>
            <el-icon>
              <User />
            </el-icon>
            <span> 个人中心 </span>
          </template>
        </el-dropdown-item>
        <el-dropdown-item @click="logout">
          <template #default>
            <el-icon>
              <SwitchButton />
            </el-icon>
            <span> 账号注销 </span>
          </template>
        </el-dropdown-item>
      </template>
    </el-dropdown>
  </div>
  <el-drawer v-model="isShowSetting" :visible.sync="isShowSetting" title="设置">
    <Settings />
  </el-drawer>
  <el-drawer v-model="isShowMessage" :visible.sync="isShowMessage" title="消息">
    <Message />
  </el-drawer>
</template>

<script lang="ts" setup>
import exitFullSrceen from "@/assets/svg/exitFullSrceenIcon.svg";
import { logoutApi, getUserInfoApi } from "@/apis/user";
import router from "@/router";
import { useRoutesStore } from "@/store/router";
import { useTokenStore } from "@/store/user";
import { ElMessage } from "element-plus";
import Settings from "@/components/controller/setting/index.vue";
import Message from "@/components/controller/message/index.vue";
import { useSettingStore } from "@/store/setting";

const userAvatar = computed(() => {
  return useTokenStore().avatar;
});

const theme = computed(() => {
  return useSettingStore().setting?.theme;
});
const isShowSetting = ref(false);
const isShowMessage = ref(false);

function changeColor() {
  let className = document.documentElement.getAttribute("class");
  if (className === "dark") {
    document.documentElement.setAttribute("class", "light");
    // theme.value = "light";
    useSettingStore().setSetting({ theme: "light" });
  } else {
    document.documentElement.setAttribute("class", "dark");
    // theme.value = "dark";
    useSettingStore().setSetting({ theme: "dark" });
  }
}

function userCenter() {
  router.push("/user-center");
}

// 获取用户信息
async function getUserInfo() {
  try {
    const res: any = await getUserInfoApi();
    if (res.code === 0) {
      useTokenStore().setAvatar(res.data.avatar);
    }
  } catch (error) {
    ElMessage.warning("获取用户信息异常！");
    console.log(error);
  }
}

// 账号注销
async function logout() {
  try {
    await logoutApi();
    ElMessage.warning("用户登出成功，即将跳转到登录页面！");
  } catch (error) {
    console.log(error);
  } finally {
    setTimeout(() => {
      localStorage.removeItem("tokenStore");
      useTokenStore().removeToken();
      useRoutesStore().resetRoutes();
      router.replace("/login-register");
    }, 1000);
  }
}

const isFullscreen = ref(false);

// 全屏化
async function handleFullScreen() {
  if (!document.fullscreenElement) {
    // 如果当前不是全屏状态，进入全屏
    try {
      await document.documentElement.requestFullscreen();
      isFullscreen.value = true;
    } catch (error) {
      console.error(`无法进入全屏: ${error}`);
    }
  } else {
    // 如果当前是全屏状态，退出全屏
    try {
      await document.exitFullscreen();
      isFullscreen.value = false;
    } catch (error) {
      console.error(`无法进入全屏: ${error}`);
    }
  }
}

onMounted(async () => {
  await getUserInfo();
});
</script>

<style>
.setting {
  position: relative;
  /* margin: 0 0 0 auto; */
  /* display: flex; */
  /* align-items: center; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px; */
}

.item {
  cursor: pointer;
  margin: 0 20px;
  margin-top: 10px;
}

.avatar {
  cursor: pointer;
}

.full-screen-icon:hover {
  animation: full-screen-icon 500ms;
}

.exit-full-screen-icon:hover {
  animation: exit-full-screen-icon 500ms;
}

.message-icon:hover {
  animation: message-icon 500ms;
}

.bell-icon:hover {
  animation: bell-icon 500ms;
}

.setting-icon:hover {
  animation: setting-icon 1s;
}

@keyframes full-screen-icon {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes exit-full-screen-icon {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes message-icon {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bell-icon {
  0% {
    transform: rotate(-30deg);
  }
  25% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(-30deg);
  }
  75% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes setting-icon {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* .avatar:hover {
  border: 2px solid rgb(220, 223, 230);
} */

/* .example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
} */
</style>
